<template>
  <div>
    <card>
      <header slot="header">
        <span v-color="'blue'">卡片名称</span>
        <a href="javascript:;" @click="del">操作按钮</a>
      </header>
      <p v-for="item in list" :key="item.id">{{ item.username }}</p>
    </card>

    <hr />

    <!-- 
      v- 开头
    -->
    <p v-color="'yellow'">hello</p>
  </div>
</template>
<script>
import card from "./components/card.vue";
export default {
  components: {
    card,
  },
  data() {
    return {
      list: [
        { id: 1, username: "jack1" },
        { id: 2, username: "jack2" },
        { id: 3, username: "jack3" },
        { id: 4, username: "jack4" },
      ],
    };
  },
  // directives 用于定义自定义指令 v-color
  directives: {
    // 
    color: {
      // inserted表示绑定指令的元素插入到节点的时候，自动执行
      // 它有参数el 代表的是使用自定义指令的元素
      // bingding 对象保存了自定指令中的一些信息，比如传递的值，指令名字等
      inserted(el, binding) {
        console.log(binding);
        el.style.color = binding.value
        el.style.fontWeight = 'bold'
      }
    }
  },
  methods: {
    del() {
      console.log(1111);
    },
  },
};
</script>
<style>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  border-bottom: 1px solid #000;
}
</style>